<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="common/css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="common/css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="common/iconfont/iconfont.css" />
		<script src="common/js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			body {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				background-color: white;
				font-family: "微软雅黑";
			}
			
			.header {
				height: 45px;
				line-height: 45px;
				background: #F2F2F2;
				color: #252525;
				font-size: 18px;
				text-align: center;
				position: relative;
			}
			
			.header>.icon {
				position: absolute;
				top: 0px;
				left: 0px;
			}
			
			.list {
				display: -webkit-box;
				height: 55px;
				border-bottom: 1px solid #F1F2F4;
				-webkit-box-align: center;
				font-size: 16px;
			}
			
			.list div {
				margin-left: 15px;
				width: 80px;
				text-align: center;
			}
			
			.list input {
				height: 100%;
				display: -webkit-box;
				-webkit-box-flex: 1;
				outline: none;
				border: none;
				font-size: 14px;
				margin-left: 5px;
				line-height: 100%;
				/*color: #7A7A7A;*/
			}
			
			.btn {
				display: -webkit-box;
				-webkit-box-pack: center;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 60px;
			}
			
			.btn .addbtn {
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				width: 200px;
				height: 40px;
				background-color: #F23030;
				font-size: 16px;
				color: white;
			}
			
			body .weui-toast {
				-webkit-transition-duration: .2s;
				transition-duration: .2s;
				opacity: 0;
				-webkit-transform: scale(.9) translate(-50%, -50%) !important;
				transform: scale(.9) translate(-50%, -50%) !important;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				visibility: hidden;
				margin: 0;
				top: 45%;
				z-index: 2000
			}
		</style>
	</head>

	<body>
		<div>
			<div class="header">
				<i class="icon Hui-iconfont" @click="myAddress">&#xe6d4;</i>新建收货地址
			</div>
			<div class="list">
				<div>收货人：</div>
				<input type="" name="" id="" placeholder="请输入收货人姓名" v-model="username" />
			</div>
			<div class="list">
				<div>手机号码：</div>
				<input type="" name="" id="" placeholder="请输入11位手机号码" v-model="phone" />
			</div>
			<div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label for="name" class="weui-label" style="text-align: center;width: 80px;">所在地区：</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" style="font-size: 14px;margin-left: 5px;color: #7A7A7A;" id="start" type="text" placeholder="选择所在地址" v-model="area">
					</div>
				</div>
			</div>
			<div class="list">
				<div>详情地址：</div>
				<input type="" name="" id="" placeholder="详细地址" v-model="address" />
			</div>
			<div class="btn">
				<div class="addbtn" @click="save">保存收货地址</div>
			</div>
		</div>
		<script src="common/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/fastclick.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				FastClick.attach(document.body);
			});
		</script>
		<script src="common/js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/city-picker.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$("#start").cityPicker({
				title: "选择所在地址",
				onChange: function(picker, values, displayValues) {
					console.log(values, displayValues);
				}
			});
		</script>
		<script src="vue/addAddressVue.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>